<script setup lang="ts">
import { type ConfigProviderThemeVars, showFailToast } from "vant";
import { onMounted, reactive, ref } from "vue";
import { useDictInfo } from "@/store/dict";
import moment from "moment/moment";
import SelectShip from "@/components/SelectInfo/SelectShip.vue";
import SelectBill from "@/components/SelectInfo/SelectBill.vue";
import { useHistorySearchParam } from "@/store/history-search-param";
import { deepClone } from "vant/es/utils/deep-clone";

const themeVars: ConfigProviderThemeVars = {
  cellLabelFontSize: "13px",
  cellLabelColor: "#7f7e7e",
  numberKeyboardZIndex: 1000,
  radioDotSize: "5px",
  navBarTitleTextColor: "#ffffff",
  navBarIconColor: "#ffffff",
  fontBold: 0,
  popupBackground: "#f6f6f6",
  calendarPopupHeight: "40%",
};

const emit = defineEmits(["isOpen", "selectedParam"]);

const tallyDateSetting = reactive({
  defaultDate: new Date(),
  minDate: new Date(new Date().setDate(new Date().getDate() - 180)),
  maxDate: new Date(new Date().setDate(new Date().getDate() + 30)),
});

const searchForm = reactive({
  transportShipId: "",
  transportShipName: "",
  transportBillId: "",
  transportBillNo: "",
  tallyDate: "",
  timeSpace: ""
});

const showPopup = reactive({
  calendar: false,
  ship: false,
  bill: false
});

const dictStore = useDictInfo();
const timeSpaceList = ref([] as Array<any>);
const historySearchParam = useHistorySearchParam();

onMounted(() => {
  timeSpaceList.value = dictStore.getDictByCode("time_space");
  searchForm.transportShipId = historySearchParam.historySearchParam.transportShipId;
  searchForm.transportShipName = historySearchParam.historySearchParam.transportShipName;
  searchForm.transportBillId = historySearchParam.historySearchParam.transportBillId;
  searchForm.transportBillNo = historySearchParam.historySearchParam.transportBillNo;
  searchForm.tallyDate = historySearchParam.historySearchParam.tallyDate;
  if (searchForm.tallyDate) {
    tallyDateSetting.defaultDate = moment(searchForm.tallyDate).toDate();
    tallyDateSetting.minDate = new Date(new Date().setDate(tallyDateSetting.defaultDate.getDate() - 180));
    tallyDateSetting.maxDate = new Date(new Date().setDate(tallyDateSetting.defaultDate.getDate() + 30));
  }
  searchForm.timeSpace = historySearchParam.historySearchParam.timeSpace;
});

function onCalendarConfirm(dates: any) {
  searchForm.tallyDate = moment(dates).format("YYYY-MM-DD");
  showPopup.calendar = false;
}

const isSelectShipOpen = (value: boolean) => {
  showPopup.ship = value;
};
const selectedShip = (value: any) => {
  searchForm.transportShipId = value.transportShipId;
  searchForm.transportShipName = value.shipNameZh;
};

function beforeShowSelectBillPopup() {
  if (!searchForm.transportShipId) {
    showFailToast("请先选择船");
    return;
  }
  showPopup.bill = true;
}

const isSelectBillOpen = (value: boolean) => {
  showPopup.bill = value;
};
const selectedBill = (value: any) => {
  searchForm.transportBillId = value.transportBillId;
  searchForm.transportBillNo = value.billNo;
};

function setParams() {
  const params = {
    ...searchForm,
    isSearching: false
  };
  for (let value of Object.values(searchForm)) {
    if (value !== "") {
      params.isSearching = true;
      break;
    }
  }
  emit("selectedParam", deepClone(params));
  showPop(false);
}

function resetParams() {
  searchForm.transportShipId = "";
  searchForm.transportShipName = "";
  searchForm.transportBillId = "";
  searchForm.transportBillNo = "";
  searchForm.tallyDate = "";
  searchForm.timeSpace = "";
}

function showPop(show: boolean) {
  emit("isOpen", show);
}


</script>

<template>
  <div class="flex-col h-[full] p-[20px] w-full" style="background: #f6f6f6">
    <van-config-provider :theme-vars="themeVars">
      <div class="flex h-[30px] justify-between">
        <div
          class="flex justify-center items-center h-full text-center text-base font-bold"
        >
          按条件检索
        </div>
        <div
          class="flex h-full justify-center items-center text-center text-base"
        >
          <div class="mr-[30px]" @click="resetParams">重置</div>
          <div class="text-blue-500 font-bold" @click="setParams">确定</div>
        </div>
      </div>

      <div>
        <van-form>
          <van-field
            v-model="searchForm.tallyDate"
            name="tallyDate"
            label="日期"
            input-align="right"
            readonly
            is-link
            placeholder="请选择日期"
            @click="showPopup.calendar = true"
            class="mt-[10px]"
          />
          <van-calendar
            class="h-[100px]"
            :min-date="tallyDateSetting.minDate"
            :max-date="tallyDateSetting.maxDate"
            :default-date="tallyDateSetting.defaultDate"
            duration="0"
            v-model:show="showPopup.calendar"
            :show-confirm="false"
            @confirm="onCalendarConfirm"
          />
          <van-field
            v-model="searchForm.timeSpace"
            name="timeSpace"
            label="班次"
            input-align="right"
            placeholder="请选择班次"
            class="mt-[10px]"
          >
            <template #label>
              班次
            </template>
            <template #input>
              <van-radio-group
                shape="dot"
                v-model="searchForm.timeSpace"
                direction="horizontal"
              >
                <van-radio
                  icon-size="18px"
                  :key="item?.dictKey"
                  v-for="item in timeSpaceList"
                  :name="item?.dictKey"
                >{{ item?.dictValue }}
                </van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="searchForm.transportShipName"
            name="transportShipId"
            label="船名"
            input-align="right"
            readonly
            is-link
            placeholder="请选择船名"
            class="mt-[10px]"
            @click="showPopup.ship = true"
          />
          <van-popup
            v-model:show="showPopup.ship"
            position="bottom"
            round
            duration="0"
            :style="{ height: 'auto' }"
          >
            <SelectShip
              @isOpen="isSelectShipOpen"
              @selectedShip="selectedShip"
            ></SelectShip>
          </van-popup>
          <van-field
            v-model="searchForm.transportBillNo"
            name="transportBillId"
            label="单号"
            input-align="right"
            readonly
            is-link
            placeholder="请选择单号"
            class="mt-[10px]"
            @click="beforeShowSelectBillPopup"
          />
          <van-popup
            v-model:show="showPopup.bill"
            position="bottom"
            round
            duration="0"
            :style="{ height: 'auto' }"
          >
            <SelectBill
              :shipId="searchForm.transportShipId"
              @isOpen="isSelectBillOpen"
              @selectedBill="selectedBill"
            ></SelectBill>
          </van-popup>
        </van-form>
      </div>
    </van-config-provider>
  </div>
</template>

<style scoped></style>
